<template>
    <hd-login :loginStyle="loginStyle" ref="hdLogin" class="hd-login" :fun="beforeLogin">
        <div :class="loginCenter">
            <div class="login-con" :class="wlClass">
                <Card icon="log-in" :bordered="false">
                    <template slot="title">
                        <div class="bg-orange"></div>
                        <h4 class="welcome-title">欢迎您登录平台</h4>
                    </template>
                    <div class="form-con">
                        <login-form @on-success-valid="handleSubmit"></login-form>
                        <div class="login-tip">
                            <a @click="showChangePwdAction">修改密码</a>
                        </div>
                    </div>
                </Card>
            </div>
        </div>
        <div :class="textClass">
            <img src="../../../assets/images/text.png">
        </div>
        <change-pwd :show="showChangePwd" @cancelShow="showChangePwd=false"></change-pwd>
        <video autoplay loop muted v-if="shiPinShow" class="video">
            <source src="https://house-manager.oss-cn-qingdao.aliyuncs.com/bd.mp4" type="video/mp4"/>
            Your browser does not support the video tag.
        </video>
    </hd-login>
</template>

<script>

import LoginForm from './login-form'
import bg from '@/assets/images/login-bg2.png'
import { mapActions } from 'vuex'
import ChangePwd from '@/views/pages/login2/change-pwd/index'
import { login } from '@/api/user'

export default {
  components: { ChangePwd, LoginForm },
  data () {
    return {
      loginStyle: {
        // backgroundImage: 'url(http://house-manager.oss-cn-qingdao.aliyuncs.com/login-bg.png)'
        backgroundImage: 'url(' + bg + ')'
      },
      showChangePwd: false,
      shiPinShow: false,
      wlClass: 'login-con2',
      textClass: 'wl-text1',
      loginCenter: 'login-center'
    }
  },
  methods: {
    handleSubmit (data) {
      login(data).then(ret => {
        let result = ret.data
        if (result.data.errcode === 0 && result.errcode === 0) {
          this.$Message.success('登录成功！')
          location.href = 'http://59.197.229.207:8080/webroot/decision/view/form?viewlet=%252F%25E7%2596%25AB%25E6%2583%2585%25E7%259B%2591%25E6%258E%25A7.frm&__parameters__=%257B%2522__pi__%2522%253Atrue%257D&_=1582775219057'
        } else {
          this.$Message.error(result.errmsg)
        }
      })
    },
    ...mapActions([
      'getUserInfo'
    ]),
    async beforeLogin () {
      await this.getUserInfo()
      this.$log()
      return true
    },
    showChangePwdAction () {
      this.showChangePwd = true
    }
  },
  mounted () {
    let shipin = this.$route.query.shipin
    if (shipin === 'yes') {
      this.shiPinShow = true
      this.loginStyle = {}
      this.wlClass = 'login-con2'
      this.textClass = 'wl-text'
    } else {
      this.loginCenter = ''
      this.wlClass = ''
    }
  }

}
</script>
<style lang="less" scoped>
    .bg-orange {
        border-radius: 4px 4px 0px 0px;
        position: absolute;
        width: 100%;
        height: 10px;
        /*background-color: #fed731;*/
        top: 0px;
        left: 0px;
    }

    .welcome-title {
        margin-top: 10px;
        text-align: center;
    }

    .login-con1 {
        width: 300px;
        margin: 0 auto;
        padding-top: 15%;
    }

    .hd-login .login-con {
        top: 68%;
    }

    .hd-login /deep/ .wl-pwd .ivu-input-group-prepend {
        padding: 8px;
    }

    .hd-login .login-con2 {
        z-index: 100;
        top: 67%;
        right: 44%;
    }

    .login-tip {
        text-align: center;
        font-size: 14px;
    }

    .video {
        width: 100%;
    }

    .wl-text {
        display: flex;
        position: absolute;
        justify-content: center;
        top: 15%;
    }

    .wl-text1 {
        position: absolute;
        justify-content: center;
        top: 15%;
        left: 10%;
    }

    .wl-text img {
        width: 60%;
    }

    .wl-text1 img {
        width: 65%;
    }

    .login-center {
        display: flex;
        justify-content: center;
    }

    .login-center .login-con, .login-con2 {
        right: auto;
        top: 68%;
    }
</style>
